<template>
  <div class="container" ref="cesiumContainer"></div>
</template>

<script setup>
import { initCustomFormatter, onMounted, ref } from 'vue'
import * as Cesium from 'cesium'

// 1.安装cesium
// 2、讲cesium目录下的Build/Cesium 的四个目录拷贝倒public

// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2)

const cesiumContainer = ref(null)

onMounted(() => {
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    infoBox: true, // 关闭信息框
    geocoder: false, // 关闭搜索
    homeButton: false, // home按钮
    sceneModePicker: false, // 场景查看器的场景模式
    baseLayerPicker: false, // 图层选择器
    navigationHelpButton: false, // 帮助按钮
    animation: false, // 动画播放
    timeline: false, //时间轴
    fullscreenButton: false, // 全屏按
  })

  // 允许使用js
  let iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0]
  iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms')
  iframe.setAttribute('src', '')

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'

  // 添加一个3d的建筑
  let tiles3d = Cesium.createOsmBuildings()
  const osmBuilding = viewer.scene.primitives.add(tiles3d)

  // 生成广州塔的位置113.3191, 23.109,
  const position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000)

  // flyTo
  viewer.camera.flyTo({
    // 指定相机的位置
    destination: position,
    duration: 2,
    // orientation: {
    //   // 指定相机的朝向
    //   heading: Cesium.Math.toRadians(0),
    //   // 指定相机的俯仰角 0度竖直向上，-90是垂直向下
    //   pitch: Cesium.Math.toRadians(-30),
    //   // 指定相机的滚转角
    //   roll: 0,
    // },
  })

  // console.log(tiles3d)
  // tiles3d.style = new Cesium.Cesium3DTileStyle({
  //   color: {
  //     conditions: [
  //       ["${feature['building']} === 'apartments'", "color('rgba(50, 255, 0, 0.5)')"],
  //       ["${feature['building']} === 'office'", "color('rgba(255, 255, 0, 0.5)')"],
  //       ["${feature['cesium#estimatedHeight']} > 300", "color('rgba(200, 200, 255, 0.7)')"],
  //       ["${feature['cesium#estimatedHeight']} > 100", "color('rgba(100, 100, 255, 0.7)')"],
  //       ["${feature['cesium#estimatedHeight']} > 50", "color('rgba(50, 50, 150, 0.7)')"],
  //       ['true', "color('#fff')"],
  //     ],
  //   },
  //   show: true,
  // })

  tiles3d.style = new Cesium.Cesium3DTileStyle({
    defines: {
      distance:
        "distance( vec2(${feature['cesium#longitude']},${feature['cesium#latitude']}), vec2(113.3191, 23.109) )",
    },
    color: {
      conditions: [
        ['${distance} < 0.01', "color('rgba(0, 0, 50, 0.7)')"],
        ['${distance} < 0.02', "color('rgba(0, 0, 50, 0.5)')"],
        ['${distance} < 0.04', "color('rgba(0, 0, 50, 0.2)')"],
        ['true', "color('#fff')"],
      ],
    },
    show: "${distance} < 0.04 && ${feature['building']} === 'apartments'",
  })
})
</script>
